import React from "react";
import Link from "next/link";
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { KnowledgeBase } from "@/types/chat";

interface KnowledgeBaseCardProps {
  knowledgeBase: KnowledgeBase;
  onDelete?: (id: string) => void;
}

export function KnowledgeBaseCard({ knowledgeBase, onDelete }: KnowledgeBaseCardProps) {
  const { id, name, description, chats } = knowledgeBase;
  
  const handleDelete = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (onDelete) {
      onDelete(id);
    }
  };

  return (
    <Card className="h-full overflow-hidden transition-all hover:shadow-md">
      <Link href={`/knowledge-base/${id}`} className="flex h-full flex-col">
        <CardHeader className="pb-2">
          <CardTitle className="line-clamp-1 text-xl">{name}</CardTitle>
        </CardHeader>
        <CardContent className="flex-1 pb-2">
          {description ? (
            <p className="line-clamp-2 text-sm text-gray-500 dark:text-gray-400">
              {description}
            </p>
          ) : (
            <p className="text-sm text-gray-400 dark:text-gray-500">
              暂无描述
            </p>
          )}
          <div className="mt-2">
            <span className="text-sm text-gray-500 dark:text-gray-400">
              {chats.length} 个对话
            </span>
          </div>
        </CardContent>
        <CardFooter className="flex justify-between pt-2">
          <Button variant="outline" size="sm" asChild>
            <Link href={`/knowledge-base/${id}`}>查看详情</Link>
          </Button>
          {onDelete && (
            <Button
              variant="destructive"
              size="sm"
              onClick={handleDelete}
              className="ml-2"
            >
              删除
            </Button>
          )}
        </CardFooter>
      </Link>
    </Card>
  );
} 